<!-- list -->
<template>
  <div class="list">
    <!-- 导航 -->
    <van-nav-bar>
      <template #left>
        <van-icon name="arrow-left" />
        <Search class="navList" />
      </template>
    </van-nav-bar>
    <van-dropdown-menu active-color="#58b67f">
      <!-- 区域 -->
      <van-dropdown-item title="区域" ref="item1">
        <van-picker
          show-toolbar
          toolbar-position="bottom"
          value-key="label"
          :columns="areaList"
          @confirm="onConfirm1"
          @cancel="onCancel"
        >
        </van-picker>
      </van-dropdown-item>
      <!-- 方式 -->
      <van-dropdown-item title="方式" ref="item2">
        <van-picker
          show-toolbar
          toolbar-position="bottom"
          value-key="label"
          :columns="rentTypeList"
          @confirm="onConfirm2"
          @cancel="onCancel"
        >
        </van-picker>
      </van-dropdown-item>
      <!-- 租金 -->
      <van-dropdown-item title="租金" ref="item3">
        <van-picker
          show-toolbar
          toolbar-position="bottom"
          value-key="label"
          :columns="priceList"
          @confirm="onConfirm3"
          @cancel="onCancel"
        >
        </van-picker>
      </van-dropdown-item>
      <!-- 筛选 -->
      <van-dropdown-item title="筛选" @open="Fn" ref="item"></van-dropdown-item>
    </van-dropdown-menu>
    <van-popup v-model="show" position="right" class="popupVan">
     <div class="main">
        <div class="shaixuan">
        <p>户型</p>
        <ul>
          <li v-for="(item, index) in list1" :key="index" @click="clickFn(index)" :class="{active: activeIndex === index}">{{item}}</li>
        </ul>
      </div>
      <div class="shaixuan">
        <p>朝向</p>
        <ul>
          <li v-for="(item, index) in list2" :key="index" @click="clickFn(index)">{{item}}</li>
        </ul>
      </div>
      <div class="shaixuan">
        <p>楼层</p>
        <ul>
          <li v-for="(item, index) in list3" :key="index" @click="clickFn(index)">{{item}}</li>
        </ul>
      </div>
      <div class="shaixuan">
        <p>房屋亮点</p>
        <ul>
          <li v-for="(item, index) in list4" :key="index" @click="clickFn(index)">{{item}}</li>
        </ul>
      </div>
     </div>
      <div class="buttomNav">
      <van-button
        class="btn1"
        color="#fff"
        square
        type="primary"
        @click="cancelFn"
      >
        <template #default>
          <div class="btnText">清除</div>
        </template>
      </van-button>
      <van-button
        class="btn2"
        color="#57b67e"
        square
        type="info"

        >确定</van-button
      >
    </div>

    </van-popup>
    <HouseItem v-for="(item, index) in houseList" :key="index" :obj="item" :houseCode="item.houseCode"/>
  </div>
</template>

<script>
import { housesSearchAPI, cityInfoAPI, houseListAPI } from '@/api'
import HouseItem from '@/views/List/components/houseItem.vue'
import Search from '@/components/Search.vue'
export default {
  components: {
    HouseItem,
    Search
  },
  props: {
    label: {
      type: String,
      default: '北京'
    }
  },
  data () {
    return {
      show: false,
      activeIndex: null,
      isActive: true,
      houseObj: {
        cityId: '',
        area: '',
        rentType: '',
        price: '',
        more: ''
      },
      areaList: [],
      rentTypeList: [],
      priceList: [],
      houseList: [],
      list1: ['一室', '二室', '三室', '四室', '四室+'],
      list2: ['东', '西', '南', '北', '东南', '东北', '西南', '西北'],
      list3: ['高楼层', '中楼层', '低楼层'],
      list4: ['集中供暖', '双卫生间', '近地铁', '随时看房', '精装', '公寓', '独立卫生间', '押一付一', '独立阳台', '月租', '限女生', '限男生', '新上']
    }
  },
  methods: {
    async onConfirm1 (value, index) {
      this.houseObj.area = value[1]
      this.$refs.item1.toggle(false)
      this.getHouseList(this.houseObj)
    },
    async onConfirm2 (value, index) {
      // console.log(value)
      this.houseObj.rentType = value
      this.$refs.item2.toggle(false)
      this.getHouseList(this.houseObj)
    },
    async onConfirm3 (value, index) {
      // console.log(value)
      this.houseObj.price = value
      this.$refs.item3.toggle(false)
      this.getHouseList(this.houseObj)
    },
    onCancel () {
      this.$refs.item1.toggle(false)
      this.$refs.item2.toggle(false)
      this.$refs.item3.toggle(false)
    },
    async getHouseList (houseObj) {
      const res = await houseListAPI({ houseObj })
      // console.log(res)
      this.houseList = res.data.body.list
      console.log(this.houseList)
    },
    cancelFn () {
      this.active = false
      this.show = false
    },
    clickFn (index) {
      console.log(index)
      this.activeIndex = index
    },
    Fn () {
      this.show = true
    }
  },
  async created () {
    this.getHouseList(this.houseObj)
    // 地区详细信息
    const resInfo = await cityInfoAPI({ name: this.label })
    this.houseObj.cityId = resInfo.data.body.value
    // 处理区域信息
    const res = await housesSearchAPI({ id: resInfo.data.body.value })
    // console.log(res)
    this.areaList = [res.data.body.area, res.data.body.subway]
    // 方式
    this.rentTypeList = res.data.body.rentType.map((item) => item.label)
    // 租金
    this.priceList = res.data.body.price.map((item) => item.label)
  }
}
</script>
<style lang='less' scoped>
/deep/ .van-button {
  width: 25%;
}
/deep/ .van-search[data-v-7cb41050] {
  top: -12px;
  width: 275px;
}
/deep/ .van-icon-map-marked:before {
  font-size: 24px;
  position: fixed;
  top: 10px;
  right: 13px;
}

.main{
  // position: absolute;
  min-height: 600px;
  .shaixuan {
  min-height: 100px;

  margin-left: 20px;
  p {
    margin-top: 20px;
    font-size: 14px;
  }
  ul {
    // width: ;
    // min-height: px;
    border-bottom: 2px solid #ccc;
    margin-left: 30px;
    margin-right: 20px;
    display: flex;
    // padding-left: 45px;
    flex-wrap: wrap;
    li {
      border: 1px solid #ccc;
      font-size: 12px;
      text-align: center;
      width: 35%;
      height: 30px;
      line-height: 30px;
      margin-right: 20px;
      margin-bottom: 15px;
      border-radius: 3px;
      color: #999;
    }
  }
}
}
.buttomNav {
  margin-top: 5px;
  z-index: 99;
  // position: fixed;
  // bottom: 0;
  width: 100%;
  .btn1 {
    width: 50%;
    .btnText {
      color: #57b67e;
    }
  }
  .btn2 {
    width: 50%;
  }
}
.popupVan {
  width: 80%;
  min-height: 500px;
}
.active {
  border: 1px solid #21b97a;
  color: #21b97a;
  background-color: #defaef;
}
</style>
